<template>

  <div class="divmain">
    <div class="divtop">
      字典管理
    </div>

    <div class="divcenter">

      <div ref="divleft" class="divleft">
        <div style="padding:21px 22px 0px 16px ;">通用字典管理(30)</div>

        <vxe-tree class="tree" height="calc(100% - 55px)" :data="treeList" :show-line="true" icon-open="vxe-icon-square-minus" trigger="node"
          icon-close="vxe-icon-square-plus" @node-click="isshowfun"></vxe-tree>

      </div>

      <div class="divright">

        <div class="divrightttitle">
          {{ title }}
        </div>
        <div class="divrighttneirong">
          <div class="divrighttneirongif" v-if="isshow1"  ref="containerRef">
            大类
          </div>
          <div class="divrighttneirongif"  v-if="isshow2"  ref="containerRef">
            中类
          </div>
          <div class="divrighttneirongif"  v-if="isshow3"  ref="containerRef">
            付款方式
          </div>
          <div class="divrighttneirongif"  v-if="isshow4"  ref="containerRef" >
           <mengtebingzhong :parent-height="containerHeight" ></mengtebingzhong>
          </div>
        </div>
      </div>
    </div>





  </div>

</template>

<script setup>
import mengtebingzhong from './zidianviews/mengtebingzhong.vue';

import { ref, onMounted, onUnmounted } from 'vue';
const containerRef = ref(null);
let title = ref('')
let isshow1 = ref(false)
let isshow2 = ref(false)
let isshow3 = ref(false)
let isshow4 = ref(false)
 

//监听浏览器窗口大小变化时，把更新后的高度传给子组件，
const containerHeight = ref(0);
onMounted(() => {
   // 使用 $nextTick 确保 DOM 更新后再获取高度
   nextTick(() => {
    containerHeight.value = containerRef.value?.clientHeight;
   
    window.addEventListener('resize', handleResize);
    
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
//监听isshow4的变化，当isshow4变为true时，重新计算高度,因为用了if，一开始为falsh，所以要监听isshow4的变化，当isshow4变为true时，重新计算高度
watch(isshow4, (newVal) => {
  if (newVal) {
    updateContainerHeight(); // 当isshow4变为true时，重新计算高度
  }
});


const handleResize = () => {
  updateContainerHeight()
};

//将获取容器高度，并且赋值给要传给子组件的变量
const updateContainerHeight = () => {
  // 使用 $nextTick 确保 DOM 更新后再获取高度
  nextTick(() => {
    
    containerHeight.value = containerRef.value?.clientHeight;
  });
}


const isshowfun = (e) => {

  isshow1.value = false
  isshow2.value = false
  isshow3.value = false
  isshow4.value = false
  if (e.node.title == '费用大类') {
    title.value = e.node.title
    isshow1.value = true

  }
  else if (e.node.title == '费用中类') {
    title.value = e.node.title
    isshow2.value = true
  }
  else if (e.node.title == '付款方式') {
    title.value = e.node.title
    isshow3.value = true
  }
  else if (e.node.title == '门特病种') {
    title.value = e.node.title
    isshow4.value = true
  }


}




const treeList = ref([
  {
    title: '费用相关',
    children: [
      { title: '费用大类' },
      { title: '费用中类' },
      { title: '付款方式' },
      { title: '财务核算' }
    ]
  },
  {
    title: '药品材料相关',
    children: [
      { title: '服药次数' },
      { title: '服药用法' },
      { title: '剂型代码' },
      { title: '计量单位' },
      { title: '药品类别' },
      { title: '药品大类' },
      { title: '药品中类' },
      { title: '服药用法' }
    ]
  },
  {
    title: '其他',
    children: [
      { title: '门特病种' },
      { title: '省门特病种' },
      { title: '病区分类' },
      { title: '部门标记' },
      { title: '产地编码' },
      { title: '出院方式' },
      { title: '单据类型' },
      { title: '病历字典' },
      { title: '门诊类别' },
      { title: '人员类别' },
      { title: '入院方式' },
      { title: '协议处方' },
      { title: '医保类别' },
      { title: '诊室编码' }

    ]
  }
])
</script>

<style lang="scss" scoped>
.divmain {
  width: 100 vw;
  height: calc(100vh - 136px);
  background-color: #a12323;
  margin: 16px;
  padding: 16px 16px 0px 16px;

  .divtop {
    width: 100%;
    height: 40px;
    background-color: #F7F7F7;
    border-radius: 4px 4px 0px 0px;
    border: 1px solid #E0E0E0;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;

  }

  .divcenter {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
  }

  .divleft {
    width: 200px;
    height: 100%;
    background-color: burlywood;
    border-top: 1px solid rgb(78, 74, 74);
    border-left: 1px solid rgb(78, 74, 74);
    border-bottom: 1px solid rgb(78, 74, 74);

    .tree {
      width: 100%;
      padding: 16px;
    }
  }

  .divright {
    width: calc(100% - 200px);
    height: 100%;
    background-color: #FFFFFF;
    border: 1px solid rgb(78, 74, 74);

    .divrightttitle {
      width: 100%;
      height: 57px;
      background-color: #FFFFFF;
      padding-top:21px ;
      padding-left: 16px;
      padding-bottom: 16px;
    }

    .divrighttneirong {
      margin: 0px 16px 16px 16px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid black;
      width: calc(100% - 32px);
      height: calc(100% - 73px);
      .divrighttneirongif {
        height:100%;
      }
    }
  }
}
</style>